<template>
	<view class="">
		<view class="content" style="margin-top: 100rpx;margin-bottom: 30rpx;">
			<view class="content-head">
				<view class="content-head-title" data-index="0" @tap="changeTo(1)">
					<view class="head-title-no-Reader">
						<uni-badge :text="dbNoReader" type="error" />
					</view>
					<view class="head-box">
						<view class="">
							<image src="../../static/theme/default/wait/db.png" class="head-title-icon"  mode=""></image>
						</view>
						<view>待办</view>
					</view>
					<view class="content-head-title-icon" :class="index == 1 ? 'lineActive':''"></view>
				</view>
				<view class="content-head-title" data-index="1" @tap="changeTo(3)">
					<view class="head-title-no-Reader">
						<uni-badge :text="gqNoReader" type="error" />
					</view>
					<view class="head-box">
						<view class="">
							<image src="../../static/theme/default/wait/gq.png" class="head-title-icon"  mode=""></image>
						</view>
						<view>挂起</view>
					</view>
					<view class="content-head-title-icon"  :class="index == 3 ? 'lineActive':''"></view>
				</view>
				<view class="content-head-title" data-index="1" @tap="changeTo(2)">
					<view class="head-title-no-Reader">
						<uni-badge :text="wcNoReader" type="error" />
					</view>
					<view class="head-box">
						<view class="">
							<image src="../../static/theme/default/wait/wc.png" class="head-title-icon"  mode=""></image>
						</view>
						<view>完成</view>
					</view>
					<view class="content-head-title-icon"  :class="index == 2 ? 'lineActive':''"></view>
				</view>
			</view>
			<view class="content-body">
				<view v-show="index == 1">
					<view class="uni-list" v-if="dbList.length">
						<uni-swipe-action>
							<uni-swipe-action-item :right-options="swipeData(value)" @click="swipeAction" @change="openedAction(key)"  v-for="(value,key) of dbList" :key="value.list_id">
								<view class="uni-media-list" @longpress="onLongPress" @tap="goMessage(value.list_id,key,value.no_reader_num)" :data-index="key">
									<view class="bg-progress" :style="{width: value.progress + '%'}"></view>
									<view class="uni-media-list-logo">
										<image :src="staticPhoto + value.photo_path + '?_=' + imgRan" :lazy-load="true" style="border-radius: 12upx;" />
									</view>
									
									<view class="red_num">
										<uni-badge :text="value.no_reader_num" type="error" />
									</view>
									
									<view class="uni-media-list-body">
										<view class="uni-media-list-text-top custom-list-text-top">
											<view class="text-limit" style="float: left;">{{value.show_name}}</view>
											<view style="float: right;color: #8f8f94;font-size: 23upx;">
												{{timestampFormat(value.time)}}
											</view>
										</view>
										<view class="uni-media-list-body-bottom">
											<view class="uni-media-list-text-bottom uni-ellipsis text-limit">{{msgHandle(value.last_msg+'')}}</view>
											<view class="uni-media-list-body-bottom--right">
												<u-tag class="custom-tag" v-if="value.tag != 0" :text="value.tagName" shape="circle" :borderColor="value.tagColor" :bgColor="value.tagColor"> </u-tag>
												<view class="list-text-progress">{{value.progress}}%</view>
											</view>
										</view>
									</view>
									
								</view>
							</uni-swipe-action-item>
						</uni-swipe-action>
					</view>
				</view>
				<view v-show="index == 3">
					<view class="uni-list" v-if="gqList.length">
						<uni-swipe-action>
							<uni-swipe-action-item :right-options="swipeData(value)" @click="swipeAction" @change="openedAction(key)"  v-for="(value,key) of gqList" :key="value.list_id">
								<view class="uni-media-list" @longpress="onLongPress" @tap="goMessage(value.list_id,key,value.no_reader_num)" :data-index="key">
									<view class="bg-progress" :style="{width: value.progress + '%'}"></view>
									<view class="uni-media-list-logo">
										<image :src="staticPhoto + value.photo_path + '?_=' + imgRan" :lazy-load="true" style="border-radius: 12upx;" />
									</view>
									
									<view class="red_num">
										<uni-badge :text="value.no_reader_num" type="error" />
									</view>
									
									<view class="uni-media-list-body">
										<view class="uni-media-list-text-top custom-list-text-top">
											<view class="text-limit" style="float: left;">{{value.show_name}}</view>
											<view style="float: right;color: #8f8f94;font-size: 23upx;">
												{{timestampFormat(value.time)}}
											</view>
										</view>
										<view class="uni-media-list-body-bottom">
											<view class="uni-media-list-text-bottom uni-ellipsis text-limit">{{msgHandle(value.last_msg+'')}}</view>
											<view class="uni-media-list-body-bottom--right">
												<u-tag class="custom-tag" v-if="value.tag != 0" :text="value.tagName" shape="circle" :borderColor="value.tagColor" :bgColor="value.tagColor"> </u-tag>
												<view class="list-text-progress">{{value.progress}}%</view>
											</view>
										</view>
									</view>
									
								</view>
							</uni-swipe-action-item>
						</uni-swipe-action>
					</view>
				</view>
				<view v-show="index == 2">
					<view class="uni-list" v-if="wcList.length">
						<uni-swipe-action>
							<uni-swipe-action-item :right-options="swipeData(value)" @click="swipeAction" @opened="openedAction(key)" v-for="(value,key) of wcList" :key="value.list_id">
								<view class="uni-media-list" @tap="goMessage(value.list_id,key,value.no_reader_num)">
									<view class="uni-media-list-logo">
										<image :src="staticPhoto + value.photo_path + '?_=' + imgRan" :lazy-load="true" style="border-radius: 12upx;" />
									</view>
									
									<view class="red_num">
										<uni-badge :text="value.no_reader_num" type="error" />
									</view>
									
									<view class="uni-media-list-body">
										<view class="uni-media-list-text-top">
											{{value.show_name}}
											<view style="float: right;color: #8f8f94;font-size: 23upx;">
												{{timestampFormat(value.time)}}
											</view>
										</view>
										<view class="uni-media-list-text-bottom uni-ellipsis">{{msgHandle(value.last_msg+'')}}</view>
									</view>
									
								</view>
							</uni-swipe-action-item>
						</uni-swipe-action>
					</view>
				</view>
			</view>
		</view>
		
		<view class="" @touchmove.stop.prevent="preventHandler">
			<u-popup class="menu-popup" :round="20" mode="center" :show="menuVisible" @close="menuVisible = false" @open="menuVisible = true">
				<view class="menu-popup-box">
					<view class="menu-popup-box__head">{{menuTitle}}</view>
					<view class="menu-popup-box-item" @click="menuItemClick(item)" v-for="item in menuList">
						<view class="menu-popup-box-item--icon">
							<image :src="item.icon" mode=""></image>
						</view>
						<view class="menu-popup-box-item--text">{{item.text}}</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view :class="['action_main animated',(action_menu ? 'fadeInDown' : 'fadeOutUp')]" v-show="showActionMenu" @tap="actionMain">
			<view class="action_base" >
				<view class="sj"></view>
				<view class="action_item" @click="openWork(0)">
					<view class="uni-media-list-logo action_icon">
						<image :src="'../../static/theme/default/chat/chat.png'" :lazy-load="true"/>
					</view>
					<text class="action_item_text">随手拍</text>
				</view>
			</view>
		</view>
		
		<u-popup :round="10" mode="top" :show="progressVisible" @close="progressVisible = false">
			<u-slider v-model="percent" step="5" :showValue="true" activeColor="#00aeff"></u-slider>
			<u-button text="确定" @click="confimProgress" color="#8db9ca"></u-button>
		</u-popup>
		<u-popup :round="10" mode="center" :show="tagVisible" @close="tagVisible = false">
			<view class="tag-box">
				<view class="tag-radio">
					<radio-group @change="tagRadioChange" 
						style="flex-wrap: wrap;display: flex;">
						<view class="tag-radio-item" v-for="(item, index) in tagList" :key="item.id">
							<view>
								<radio :value="item.name" :color="item.color" :checked="index+1 == tagIndex"/>
							</view>
							<u-tag :text="item.name" plain :borderColor="item.color" :color="item.color"> </u-tag>
						</view>
					</radio-group>
				</view>
				<!-- <view class="tag-box__head">
					<view class="tag-box__head--left" @click="deleteTag">删除</view>
					<view class="tag-box__head--right" @click="confimTag">设置</view>
				</view> -->
			</view>
		</u-popup>
	</view>
</template>

<script>
	import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue';
	import uniSwipeAction from '@dcloudio/uni-ui/lib/uni-swipe-action/uni-swipe-action.vue'
	import _get from '../../common/_get';
	import _hook from '../../common/_hook';
	import _action from '../../common/_action';
	import _data from '../../common/_data';
	import _custom from '../../common/_custom'
	import moment from 'moment'
	import _mixins from '../../common/_mixins';
	
	let obscode = _data.localData('obscode')
	export default {
		components: {
			uniBadge,
			uniSwipeAction
		},
		data() {
			return {
				list: [],
				dbList: [],
				wcList: [],
				gqList: [],
				dbNoReader: 0,
				gqNoReader: 0,
				wcNoReader: 0,
				list_index: '',
				list_id: '',
				action_menu: false,
				action_menu_num: 0,
				index: 1,
				swiperHeight: '',
				work: {},
				users: [],
				progressVisible: false,
				percent: 0,
				menuVisible: false,
				menuList: [
					{
						text: '设置标签',
						icon: '../../static/theme/default/wait/biaoji.png'
					},
					{
						text: '调整进度',
						icon: '../../static/theme/default/wait/progress.png'
					},
					{
						text: '挂起事务',
						icon: '../../static/theme/default/wait/gq.png'
					},
					{
						text: '删除标签',
						icon: '../../static/theme/default/wait/delete.png'
					},
				],
				tagValue: '',
				tagList: [],
				tagVisible: false,
				tagIndex: 0,
				menuTitle: ''
			}
		},
		onLoad() {
			this.getWorkChatTagList();
		},
		onShow() {
			_hook.routeTabBarHook();
			let _this = this;
			_get.getWorkChatList();
			let i = _data.localData('wait_index')
			if(i) {
				_this.changeTo(i)
				_data.localData('wait_index',0)
			}
			// chat_list = _data.localData('chat_list');
			uni.$on('data_work_chat_list',function(data){
				_this.dbList = []
				_this.gqList = []
				_this.wcList = []
				_this.dbNoReader = 0;
				_this.gqNoReader = 0;
				_this.wcNoReader = 0;
				_data.localData('work_chat_list',data);
				data.forEach(item => {
					_this.tagList.forEach(v => {
						if(item.tag && item.tag == v.id) {
							item.tagName = v.name
							item.tagColor = v.color
						}
					})
					if(item.work_type == 1) {
						_this.dbList.push(item)
						_this.dbNoReader += item.no_reader_num;
					} else if(item.work_type == 3) {
						_this.gqList.push(item)
						_this.gqNoReader += item.no_reader_num;
					} else {
						_this.wcList.push(item)
						_this.wcNoReader += item.no_reader_num;
					}
				})
				_this.setList()
			});
			
			// #ifdef H5
			document.onLong = function(e) {
				var e = e || window.event;
				e.preventDefault();
			};
			// #endif
			
		},
		onNavigationBarButtonTap(e) {
			if(e.index == 0) {
				this.action_menu = !this.action_menu;
				this.action_menu_num ++;
			} else if(e.index == 1) {
				uni.navigateTo({
					url: './search',
					animationType: 'none'
				})
			}
		},
		onPullDownRefresh() {
			_get.getWorkChatList();
			setTimeout(() => {
				uni.stopPullDownRefresh()
			},1000)
		},
		computed: {
			showActionMenu(){
				return this.action_menu_num > 0;
			},
			staticPhoto(){
				return _data.staticPhoto();
			},
			imgRan(){
				return Math.random();
			},
		},
		methods: {
			getTeamWorkPxid() {
				let _this = this;
				_custom.getDataJava({
					apiname: 'getTeamWorkPxid',
					apiparam: {
						categoryid: this.work.id
					},
					success(res) {
						_this.users = [];
						_this.users = res.map(item => {
							return item.pxid * 1
						})
						_this.addWorkGroup()
					}
				})
			},
			updateWorkGroupType(type) {
				let _this = this;
				_this.$httpSend({
					path: '/im/work/updateWorkGroupType',
					data: { list_id: _this.getListId(),work_type: type },
					success: () => {
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
						_get.getWorkChatList();
					}
				});
			},
			/**
			 * 设置当前的会话数据
			 */
			setList() {
				let _this = this;
				switch(_this.index) {
					case 1:
						_this.list = _this.dbList;
						break;
					case 3:
						_this.list = _this.gqList
						break;
					case 2:
						_this.list = _this.wcList
						break;
				}
			},
			/**
			 * 切换会话类型
			 * @param {Object} v 1：待办，3：挂起，2：完成
			 */
			changeTo(v) {
				this.menuVisible = false;
				_data.localData('work_index',v);
				this.index = v;
				switch(v) {
					case 1: 
						this.menuList = [
							{
								text: '设置标签',
								icon: '../../static/theme/default/wait/biaoji.png'
							},
							{
								text: '调整进度',
								icon: '../../static/theme/default/wait/progress.png'
							},
							{
								text: '挂起事务',
								icon: '../../static/theme/default/wait/gq.png'
							},
							{
								text: '删除标签',
								icon: '../../static/theme/default/wait/delete.png'
							},
						]
						break;
					case 3:
						this.menuList = [
							{
								text: '设置标签',
								icon: '../../static/theme/default/wait/biaoji.png'
							},
							{
								text: '调整进度',
								icon: '../../static/theme/default/wait/progress.png'
							},
							{
								text: '解挂事务',
								icon: '../../static/theme/default/wait/jg.png'
							},
							{
								text: '删除标签',
								icon: '../../static/theme/default/wait/delete.png'
							},
						]
						break;
				}
				_custom.getWorkChatList()
			},
			/**
			 * 点击标签
			 * @param {Object} v 回调参数
			 */
			tagRadioChange(v) {
				let tagValue = v.detail.value
				this.tagList.forEach(item => {
					if(item.name == tagValue) {
						this.tagValue = item.id
					}
				})
				this.confimTag()
			},
			/**
			 * 确认进度
			 */
			confimProgress() {
				let _this = this;
				if(_this.percent == 100) {
					uni.showModal({
						content: '是否设置为完成?',
						success(res) {
							if (res.confirm) {
								_this.updateWorkGroupType(2);
								_this.progressVisible = false;
								_get.getWorkChatList();
							}
						}
					})
				} else {
					_this.$httpSend({
						path: '/im/work/updateWorkGroupProgress',
						data: { list_id: _this.getListId(),progress: _this.percent },
						success: () => {
							_get.getWorkChatList();
							_this.progressVisible = false;
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							})
						}
					});
				}
			},
			actionMain(){
				this.action_menu = false;
				this.action_menu_num ++;
			},
			msgHandle(msg){
				return msg.replace(/&lt;/g,'<');
			},
			timestampFormat(time){
				return _action.timestampFormat(time);
			},
			openedAction(key){
				this.list_index = key;
			},
			/**
			 * 获取list_id
			 */
			getListId() {
				return this.list[this.list_index].list_id;
			},
			/**
			 * 点击菜单弹窗item
			 * @param {Object} v 菜单数组中的对象
			 */
			menuItemClick(v) {
				this.setList()
				if(v.text == '挂起事务') {
					this.updateWorkGroupType(3);
				} else if(v.text == '调整进度') {
					this.progressVisible = true;
					this.percent = this.list[this.list_index].progress;
				} else if(v.text == '解挂事务') {
					this.updateWorkGroupType(1);
				} else if(v.text == '设置标签') {
					this.tagVisible = true
					this.tagIndex = this.list[this.list_index].tag
					this.getWorkChatTagList()
				} else if(v.text == '删除标签') {
					this.deleteTag();
				}
				this.menuVisible = false
			},
			/**
			 * 会话左右滑动事件
			 * @param {Object} e 回调参数
			 */
			swipeAction(e){
				let _this = this;
				_this.setList()
				let list_id = _this.list[_this.list_index].list_id;
				if(!list_id){
					return;
				}
				if(e.position == 'right') {
					switch (e.index){
						case 0:
							/** 置顶/取消置顶 */
							let value = e.content.text == '置顶' ? 1 : 0;
							_this.$httpSend({
								path: '/im/message/chatTop',
								data: { list_id,value },
								success: () => {
									_get.getWorkChatList();
								}
							});
							break;
						case 1:
							/** 标为未/已读 */
							_this.$httpSend({
								path: '/im/chat/sign',
								data: { list_id,no_reader_num: _this.list[_this.list_index].no_reader_num },
								success: () => {
									_get.getWorkChatList();
								}
							});
							break;
						default:
							break;
					}
				}
				
			},
			swipeData({no_reader_num,top}){
				return [
					{
						text: (top ? '取消置顶' : '置顶'),
						style: {
							backgroundColor: 'red'
						},
					},
					{
						text: (no_reader_num ? '标为已读' : '标为未读'),
						style: {
							
						},
					},
				];
			},
			openWork(v){
				switch (v){
					case 0:
						uni.navigateTo({
							url: './add/index',
							animationType: 'slide-in-bottom'
						})
						break;
					default:
						return;
						break;
				}
			},
			goMessage(list_id,key,no_reader_num){
				let _this = this
				if(no_reader_num > 0) {
					_get.getChatData({
						send_data: {
							list_id: list_id,
							time: 0,
							is_up: 1,
						},
						is_action_data: 1,
					});
					_this.setList()
					this.list[key].no_reader_num = 0;
					// _data.localData('work_chat_list',this.list);
					_action.updataNoReader(list_id);
					_get.getWorkChatList();
				}
				_data.localData('message_list_id',list_id);
				uni.navigateTo({
					url: '../chat/message?list_id=' + list_id + '&type=wait',
				});
			},
			/**
			 * 长按监听
			 * @param {Object} e 回调参数
			 */
			onLongPress(e) {
				if(!this.list.length) {
					this.setList()
				}
				let index = e.currentTarget.dataset.index;
				this.list_index = Number(index);
				this.menuTitle = this.list[this.list_index].show_name;
				this.$nextTick(() => {
					setTimeout(() => {
						this.menuVisible = true;
					}, 10);
				});
			},
			/**
			 * 确认标签
			 */
			confimTag() {
				let that = this;
				if(!this.tagValue) {
					uni.showToast({
						title: '请选择标签',
						icon: 'none'
					})
					return
				}
				_mixins.methods.$httpSend({
					path: '/im/work/updateWorkChatTag',
					data: {
						list_id: this.getListId(),
						tag: this.tagValue
					},
					success() {
						uni.showToast({
							title: '设置成功',
							icon: 'none'
						})
						that.tagVisible = false;
						_get.getWorkChatList();
					}
				});
			},
			/**
			 * 删除标签
			 */
			deleteTag() {
				let that = this;
				if(this.list[this.list_index].tag == 0) {
					uni.showToast({
						title: '该会话没有设置标签',
						icon: 'none'
					})
					return
				}
				_mixins.methods.$httpSend({
					path: '/im/work/updateWorkChatTag',
					data: {
						list_id: this.getListId(),
						tag: 0
					},
					success() {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						that.tagVisible = false;
						_get.getWorkChatList();
					}
				});
			},
			/**
			 * 获取标签数据
			 */
			getWorkChatTagList() {
				let that = this;
				_mixins.methods.$httpSend({
					path: '/im/work/getWorkChatTagList',
					success_action: true,
					success(data) {
						that.tagList = data.msg
					}
				});
			},
			preventHandler() {
				return
			}
		}
	}
</script>

<style scoped>
	.bg-progress {
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(72,169,197,.1);
	}
	
	.uni-media-list {
		border-bottom: 1rpx solid #eee;
	}
	
	.uni-media-list-logo {
		height: 85upx;
		width: 85upx;
	}
	
	.red_num {
		position: absolute;
		height: 34upx;
		top: 7upx;
		left: 95upx;
		font-size: 23upx !important;
	}
	
	.text-limit {
		width: 410rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.uni-media-list-body-bottom {
		width: 100%;
		display: flex;
	}
	
	.uni-media-list-body-bottom--right {
		display: flex;
		width: calc(100% - 410rpx);
	}
	
	.list-text-progress {
		position: absolute;
		right: 20rpx;
		bottom: 15rpx;
		font-size: 25rpx;
		color: #999;
	}
	
	.uni-swipe-action {
		width: 750upx !important;
	}
	
	.action_main {
		   position: fixed;
		   
		   top: 55px;
		   
		   /* #ifndef H5 */
		   top: 15px;
		   /* #endif */
		   
		   width: 750upx;
		   height: 1080upx;
		   z-index: 999999;
	}
	
	.action_base {
		   position: absolute;
		   right: 15upx;
		   width: 300upx;
		   background: #36363d;
		   border-radius: 10upx;
	}
	
	.sj {
		   position: fixed;
		   top: -15upx;
		   width: 0;
		   height: 0;
		   right: 35upx;
		   border-left: 20upx solid transparent;
		   border-right: 20upx solid transparent;
		   border-bottom: 20upx solid #36363d;
		   z-index: 99999;
	}
	
	.action_item {
		   color: #e5e5e5;
		   height: 100upx;
		   line-height: 100upx;
		   margin-left: 45upx;
		   border-bottom: 1px solid #3e3e3e;
	}
	
	.action_icon {
		   width: 45upx;
		   height: 45upx;
		   display: inline-block;
		   vertical-align: middle;
	}
	
	.action_item:last-child{
		   border: none;
	}
	
	.action_item_text {
		   font-size: 30upx;
	}
	
	.content-head {
		height: 100rpx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		/* #ifdef H5 */
		top: 90rpx;
		/* #endif */
		width: 100%;
		z-index: 9999;
		background-color: #eee;
	}
	
	.content-head-title {
		flex: 1;
		text-align: center;
		position: relative;
	}
	
	.head-title-no-Reader {
		position: absolute;
		top: -20rpx;
		right: 40rpx;
		font-size: 23upx !important;
	}
	
	.head-box {
		display: flex;
		justify-content: center;
	}
	
	.head-title-icon {
		width: 35rpx;
		height: 35rpx;
		margin-right: 10rpx;
		margin-top: 9rpx;
	}
	
	.content-head-title-icon {
		position: absolute;
		bottom: -10rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40%;
		height: 5rpx;
	}
	
	.lineActive {
		background-color: skyblue;
	}
	
	.content-body {
		min-height: calc(100vh - 220rpx);
		margin-top: 100rpx;
	}
	
	.work-box {
		width: 600rpx;
		margin: 0 auto;
		max-height: 400rpx;
		overflow-y: scroll;
		padding: 20rpx;
	}
	
	.work-box__head {
		height: 100rpx;
		font-size: 30rpx;
	}
	
	.work-box-item {
		width: 100%;
		height: 100rpx;
		font-size: 25rpx;
	}
	
	.tag-box {
		width: 650rpx;
	}
	
	.tag-box__head {
		height: 100rpx;
		display: flex;
	}
	
	.tag-box__head > view {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #fff;
	}
	
	.tag-box__head--left {
		background-color: #d81e06;
		border-radius:  0 0 0 20rpx;
	}
	
	.tag-box__head--right {
		background-color: #8db9ca;
		border-radius: 0 0 20rpx 0;
	}
	
	.tag-radio {
		padding: 20rpx;
	}
	
	.tag-radio-item {
		display: flex;
		width: 300rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}
	
	.custom-tag {
		position: absolute;
		right: 80rpx;
		bottom: 20rpx;
	}
	
	/deep/ .custom-tag .u-tag {
		height: 30rpx;
		line-height: 30rpx;
	}
	
	/deep/ .custom-tag .u-tag__text--medium {
		font-size: 20rpx;
	}
	
	/deep/ .tag-radio-item .uni-radio-input.uni-radio-input-checked:before {
		content: ''
	}
	
	/deep/ .tag-radio-item .uni-radio-input {
		transform:scale(0.7)
	}
	
</style>
<style lang="scss">
	.menu-popup {
		&-box {
			width: 560rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			font-size: 28upx;
			color: #333;
			background-color: #fff;
			
			&__head {
				height: 60rpx;
				font-size: 25rpx;
				padding-left: 20rpx;
				line-height: 60rpx;
				border-bottom: 1rpx solid #eee;
			}
			
			&-item {
				display: flex;
				align-items: center;
				height: 120rpx;
				padding: 0 40upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			
				&:active {
					background-color: #f3f3f3;
				}
				
				&--icon {
					image {
						width: 40rpx;
						height: 40rpx;
						margin-top: 15rpx;
					}
				}
				
				&--text {
					font-size: 25rpx;
					margin-left: 10rpx;
					font-size: 32rpx;
				}
			}
		}
	}
</style>
